<template>
    <div class="root" @click="closeClick">
        <!--头部大的div-->
        <div class="header"></div>
        <!-- 中间的div -->
        <div class="container">
            <div class="menu">
                <ul>
                    <li>
                        <router-link to="">首页</router-link>
                    </li>

                    <li>
                        <router-link to="">全部分类</router-link>
                    </li>

                    <li>
                        <router-link to="">推荐</router-link>
                    </li>

                    <li>
                        <router-link to="">个人中心</router-link>
                    </li>
                </ul>
            </div>
            <div class="right-box"></div>
        </div>
        <!--中间的div结束-->
    </div>
</template>


<script>
export default {
    methods: {
        closeClick: function () {
            this.$emit('close');
        }
    }
}
</script>


<style scoped>
.root {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}

.header {
    height: 50px;
}

.container {
    display: flex;
}

.menu {
    background-color: #282828;
    height: calc(100vh - 50px);
    /*
    flex-grow:放大比例
    */
    flex-grow: 1;
}

.right-box {
    flex-basis: 80px;
    flex-grow: 0;
}
ul{
    margin: 0px;
    list-style: none;
    font-size: 1.6rem;
    padding-left: 0px;
}
li{
    padding-left: 10px;
}
</style>


